<template>
  <te-modal v-bind="$attrs" v-on="$listeners" class="new-project-modal">
    <template #title>新建项目</template>
    <template #content>
      <div class="form-content">
        <div class="form-group">
          <label for="project-name">项目名称</label>
          <TeInput
            class="modal-input"
            v-model="project_name"
            id="project-name"
            placeholder
          />
        </div>
        <div class="form-group">
          <label for="project-decription">项目介绍</label>
          <te-text-area
            rows="6"
            class="modal-textarea"
            v-model="project_description"
            id="project-decription"
            placeholder
          ></te-text-area>
        </div>
        <div class="form-group">
          <label>项目语言</label>
          <select-language
            :languages="languages"
            :r-language="rLanguage"
            @rLanChange="(val) => (rLanguage = val)"
            :n-language="nLanguage"
            @nLanChange="(val) => (nLanguage = val)"
          >
            <template #r-lang="{lang,index}">
              <option :value="index">{{ lang }}</option>
            </template>
            <template #n-lang="{lang,index}">
              <option :value="index">{{ lang }}</option>
            </template>
          </select-language>
        </div>
        <div class="form-group">
          <label for>著作授权许可证</label>
          <select-license :licenses="licenses" v-model="select_license">
            <template #lincenses="{license}">
              <option :value="license">
                {{ license }}
              </option>
            </template>
          </select-license>
        </div>
        <div class="form-group">
          <label>汉化mod类型</label>
          <select-game-type :types="types" v-model="select_type">
            <template #types="{type}">
              <option :value="type">{{ type }}</option>
            </template>
          </select-game-type>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="footer-btn">
        <te-button class="create-button" @click="createProject">创建</te-button>
      </div>
    </template>
  </te-modal>
</template>

<script>
  import TeModal from '@/components/TeUi/TeModal';
  import TeInput from '@/components/TeUi/TeInput';
  import TeTextArea from '@/components/TeUi/TeTextArea';
  import TeButton from '@/components/TeUi/TeButton';
  import SelectLanguage from './CreateProject/SelectLanguage';
  import SelectLicense from './CreateProject/SelectLicense';
  import SelectGameType from './CreateProject/SelectGameType';
  import pluginManager from '../../../../script/file/manager';

  export default {
    components: {
      TeModal,
      TeInput,
      TeTextArea,
      SelectLanguage,
      SelectLicense,
      SelectGameType,
      TeButton,
    },
    data() {
      return {
        project_name: '',

        project_description: '',
        /**
         * Language
         */
        languages: {
          en: 'English',
          de: 'German',
          fr: 'France',
          cn: '简体中文',
          tc: '繁体中文',
        },
        rLanguage: 'en',
        nLanguage: 'cn',
        /**
         * Lincense
         */
        licenses: [
          'CC BY',
          'CC BY-NC',
          'CC BY-NC-ND',
          'CC BY-NC-SA',
          'CC BY-ND',
          'CC BY-SA',
        ],
        select_license: 'CC BY',
        /**
         * Game Type
         */
        types: ['RimWorld'],
        select_type: 'RimWorld',
      };
    },
    methods: {
      initData() {
        this.project_name = '';
        this.project_description = '';
        this.rLanguage = 'en';
        this.nLanguage = 'cn';
        this.select_license = 'CC BY';
        this.select_type = 'RimWorld';
      },
      createProject() {
        if (this.project_name.length < 2) {
          // alert('项目名称过短')
          return;
        }
        if (this.project_description.length < 10) {
          // alert('项目描述过短')
          return;
        }
        let group = pluginManager.buildGroup('root');
        let project = pluginManager
          .buildProject()
          .setFileGroup(group)
          .setAuthor('?')
          .setLanguage(
            this.selectLanguage(this.rLanguage),
            this.selectLanguage(this.nLanguage)
          )
          .setLICENSE(this.selectLicense(this.select_license))
          .setDescription(this.project_description)
          .setProjectName(this.project_name)
          .setRootPath('')
          .build();
        this.$root.store.buildNewProject(project);
        this.$emit('close');
      },
      selectLanguage(value) {
        switch (value) {
          case 'en': {
            return 0;
          }
          case 'fr': {
            return 1;
          }
          case 'de': {
            return 2;
          }
          case 'cn': {
            return 3;
          }
          case 'tc': {
            return 4;
          }
        }
      },
      selectLicense(value) {
        switch (value) {
          case 'CC BY': {
            return 0;
          }
          case 'CC BY-NC': {
            return 1;
          }
          case 'CC BY-NC-ND': {
            return 2;
          }
          case 'CC BY-NC-SA': {
            return 3;
          }
          case 'CC BY-ND': {
            return 4;
          }
          case 'CC BY-SA': {
            return 5;
          }
        }
      },
    },
  };
</script>

<style scoped>
  label,
  .label {
    display: block;
    font-size: 0.875em;
    margin-bottom: 6px;
  }

  .new-project-modal >>> .te-modal-content {
    display: flex;
  }

  .form-content {
    width: 300px;
  }

  .form-group:not(:last-child) {
    margin-bottom: 20px;
  }

  .files-content {
    width: 350px;
    display: flex;
    flex-direction: column;
  }

  .modal-input,
  .modal-textarea {
    padding: 0 14px;
    height: 40px;
    background: #484848;
    color: #f4f4f4;
  }

  .modal-input::placeholder {
    color: #999;
  }

  .modal-textarea {
    background: #484848;
    color: #f4f4f4;
    padding: 14px;
    height: auto;
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;
  }

  .create-button {
    margin-top: 20px;
    width: 106px;
    height: 40px;
  }
</style>
